<template>
	<div>
		<template v-for="item in value" :key="item.value">
			<span @click="onItemClickHandler(item)">{{item.name}}
				<van-icon name="arrow" />
			</span>
		</template>
	</div>
</template>

<script>
	import {
		sendComponentEventRequest
	} from '@/utils/requestUtils.js';
	import utils from '@/utils/utils.js';
	export default {
		name: "TreePathComponent",
		props: ["componentModel"],
		data() {
			return {
				value: [],
				selectedValue: null,
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		methods: {
			setProp(prop) {
				for (var k in prop) {
					if (k == "value") {
						this.selectedValue = null;
						this.value = prop[k];
					}
				}
			},
			onItemClickHandler(item) {
				if (this.componentModel.onItemClick == false) {
					return;
				}
				this.selectedValue = item.value;
				sendComponentEventRequest(this, "itemClickEvent", {});
			},
			getValue() {
				if (this.selectedValue != null) {
					return this.selectedValue;
				}
				if (this.value == null || this.value.length == 0) {
					return undefined;
				}
				return this.value[this.value.length - 1].value;
			}
		},
	}
</script>

<style>
</style>
